<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工离职</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        .display {
            display: inline-block;
        }
        .center{
            text-align: center;
            position: relative;
            transform: translate(-100px);
        }
        .box{
            width: 55vw;
            margin: 8vh auto;
        }
        .content{
            width: 50vw;
            margin: 0 auto;
        }
        .title{
            font-size: 1.2rem;
            line-height: 5rem;
        }
        .box img{
            width: 3rem;
            vertical-align: middle;
        }
        .hint{
            font-size: 1rem;
            line-height: 3.5rem;
        }
        .search{
            text-indent: 8rem;
        }
        .show{
            display: none;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="title">
        <img src="/images/remove.png" >
        <span >员工离职</span>
    </div>
    <div class="hint">请输入员工工号或姓名查询:</div>
    <div id="parentTarget" >
        <div class="layui-form layui-form-pane1 search"  lay-filter="first">
            <!-- 查询条件 -->
            <div class="demoTable">
                <div class="layui-inline display" >
                    <input class="layui-input" name="id" id="demoReload" autocomplete="off" placeholder="工号">
                </div>&nbsp;&nbsp;&nbsp;
                <div class="layui-inline display" >
                    <input class="layui-input" name="realName"  autocomplete="off" placeholder="姓名">
                </div>&nbsp;&nbsp;&nbsp;

                <button class="layui-btn">查询</button>
            </div>
        </div>
        <!--<table id="demo" lay-filter="test"></table>-->
    </div>
    <br> <br>

    <div class="content show">

        <form class="layui-form" lay-filter="example" id="staffInfo">

            <input type="hidden" name="id" id="staffId">
            <input type="hidden" name="realName" id="staffRealName">

            <div class="layui-form-item display" >
                <label class="layui-form-label">部门</label>
                <div class="layui-input-inline display " >
                    <select name="deptId"  lay-filter="roleId_search" lay-search disabled>
                        <option value="">部门</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item display" >
                <label class="layui-form-label">职务</label>
                <div class="layui-input-inline display " >
                    <select name="roleId"  lay-filter="roleId_search" lay-search disabled>
                        <option value="">职务</option>
                        <option id="role"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item  display ">
                <label class="layui-form-label  ">性别</label>
                <div class="layui-input-inline ">
                    <input type="radio" name="gender" value="1" title="男" disabled>
                    <input type="radio" name="gender" value="0" title="女" disabled>
                </div>
            </div>

            <div class="layui-form-item  display ">
                <label class="layui-form-label  ">状态</label>
                <div class="layui-input-inline ">
                    <input type="radio" name="state" value="1" title="在职" >
                    <input type="radio" name="state" value="2" title="离职" >
                </div>
            </div>

            <div class="layui-form-item center">
                <div class="layui-input-block ">
                    <button class="layui-btn" lay-submit lay-filter="formDemo" >提交</button>
                    <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    /*表格数据*/
    layui.use([ 'form', 'layer'], function(){
        var form = layui.form
            ,layer = layui.layer
            , $ = layui.$;

        form.render();
        //获取职务数据
        getRole();
        //获取部门数据
        getDept();
        /*获取职务数据*/
        function getRole(){

            $.post(
                "/s/getRole",{},function (res) {

                    //遍历
                    if(res.success=="true"){
                        var roleVoList =res.data;

                        for (var i = 0; i < roleVoList.length; i++) {

                            //创建新的option
                            var $new_option=$("<option></option>");
                            //将option添加到职务下拉框
                            $("[name='roleId']").append($new_option);
                            $new_option.val(roleVoList[i].id);
                            $new_option.html(roleVoList[i].name);
                            form.render();//更新全部
                        }

                    }
                }
            )

        }

        /*获取部门数据*/
        function getDept(){
            $.post(
                "/s/getDept",{},function (res) {

                    //遍历
                    if(res.success=="true"){
                        var deptList =res.data;

                        for (var i = 0; i < deptList.length; i++) {

                            //创建新的option
                            var $new_option=$("<option></option>");
                            //将option添加到职务下拉框
                            $("[name='deptId']").append($new_option);
                            $new_option.val(deptList[i].id);
                            $new_option.html(deptList[i].name);
                            form.render();//更新全部
                        }

                    }
                }
            )
        }

        //按钮单击事件，条件搜索
        $('.demoTable .layui-btn').on('click', function () {

            //员工id
            var id=$("[name='id']").val();
            //员工姓名
            var realName=$("[name='realName']").val();
            /*查询员工数据*/
            $.post(
                "/s/unique",{
                    id :id
                    ,realName:realName
                }
                ,function (res) {
                    var data=res.data;

                    if(res.success=="true"){

                        $("[name='realName']").val(res.data.realName);
                        $("[name='id']").val(res.data.id);

                        $(".content").removeClass("show");
                        form.val('example',{
                            'id': data.id
                            ,'realName': data.realName
                            ,'gender':data.gender
                            ,'state':data.state
                            ,'roleId':data.roleId
                            ,'deptId':data.deptId
                        });
                        form.render();
                    }else{
                        $(".content").addClass("show");
                        layer.alert(res.msg);

                    }

                }
            )

        });

        //触发事件
        form.on('submit(formDemo)',function (data) {
            $.post(
                //员工离职
                "/s/remove",form.val("example"),function (res) {

                    layer.open({
                        type: 0
                        ,title: '提示'
                        ,content: res.msg
                        ,success:function (layero,index) {
                            indexo=index;
                            form.render();
                        }
                    });

                }

            )
            return false;
        })

    });

</script>
</html>